window.onload = function () {
     // 设置对应的显示
     var centerBoxs=document.querySelectorAll('.center-box');
     console.log(centerBoxs);
    // 获得所有按钮元素
    var flag;
    var lis = document.querySelectorAll('.first-box li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index",i);
        lis[i].onclick = function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].querySelector('a').style.color = '#999';
                lis[i].querySelector('.box-tangle').style.display='none';
                // centerBoxs[i].style.display='none';
                centerBoxs[i].style.display="none";
            }
            flag=this.querySelector('a');
            this.querySelector('a').style.color = 'red';
            this.querySelector('.box-tangle').style.display='block';

            centerBoxs[this.getAttribute("index")].style.display='block';
            
        }
    }
   var tangle= document.querySelector('.first-box .box-tangle');
   tangle.click();
    //给所有的a添加触摸事件
    var as=document.querySelectorAll('.first-box ul>li a');
    for(var i=0;i<as.length;i++){
        as[i].addEventListener('mouseenter',function(){
            for(var i=0;i<as.length;i++){
                if(flag===as[i]){
                    continue;   
                  }else
                 as[i].style.color = '#999';
            } 
            this.style.color='#fff';            
            flag.style.color='red';
        })
    }
    for(var i=0;i<as.length;i++){
        as[i].addEventListener('mouseleave',function(){
            for(var i=0;i<as.length;i++){
                 as[i].style.color = '#999';
                 flag.style.color='red';
            } 
        })
    }
}
// $(function(){
//     $('.first-box ul>li').click(function(){
//         var index=$(this).index();
//         $('.div-z .center-box').eq(index).show();
//         $('.div-z .center-box').eq(index).siblings().hide();
//     })
// })
